<template>
    <main>
        <div class="page-title"><h1>最新资讯</h1></div>

        <div class="news-wrapper container">
            <ul class="news-content">
                <li><a
                    href="https://getmalus.medium.com/%E7%BB%88%E4%BA%8E%E7%AD%89%E5%88%B0%E4%BD%A0-malus-firefox%E7%81%AB%E7%8B%90%E6%8F%92%E4%BB%B6%E6%AD%A3%E5%BC%8F%E4%B8%8A%E7%BA%BF-c80fc38a4995"
                    target="_blank"><i class="ri-newspaper-fill"></i> <span>【公告】Firefox版Malus火狐插件正式上线，海外华人翻墙回国一键搞定</span>
                    <i class="ri-arrow-drop-right-line"></i></a></li>
            </ul>
        </div>
    </main>
</template>

<script>
export default {
    name: "News"
}
</script>

<style scoped lang="scss">
main {
    .page-title {
        display: flex;
        justify-content: center;
        padding: 164px 0 60px;

        h1 {
            display: block;
            font-size: 48px;
            font-weight: 400;
            position: relative;
            text-align: center;
        }

        h1:before {
            display: block;
            content: "";
            width: 84px;
            height: 36px;
            position: absolute;
            background-image: url(../assets/element_dash.cd709.png);
            background-repeat: no-repeat;
            background-size: 84px 36px;
            top: -20px;
            left: -40px;
        }
    }

    .news-wrapper {
        margin: 0 auto 120px;
        min-height: calc(100vh - 550px);
        .news-content {
            li {
                a {
                    display: flex;
                    align-items: center;
                    font-size: 18px;
                    font-weight: 500;
                    padding: 32px 0;
                    color: #333;
                    border-top: 1px solid #f3f3ff;
                    transition: all .2s ease;
                    span {
                        font-size: 18px;
                    }
                    i {
                        margin-right: 24px;
                        display: flex;
                        height: 40px;
                        width: 40px;
                        justify-content: center;
                        align-items: center;
                        border-radius: 20px;
                        color: #c9c6f7;
                        font-size: 24px;
                    }
                    i:last-child {
                        margin-left: auto;
                        font-size: 24px;
                        color: #c9c6f7;
                    }
                }
            }
        }
    }
}
</style>
